<template>
	<view>
		<!-- 发布遮罩 -->
		<u-mask :show="showz" @click="showz = false" :zoom="false">
			<view class="warp1 " :style="{
				height:$height()+'px',
			   width:$width()+'px',
			}">
				<view class="warp1_1 ">
					<view class="warp1_2">
						<view class="warp1_2_1" @click="submit('transferPosts',2)">
							<view class="">
								<image src="@/static/img/zr.png" />
								<text>转让</text>
							</view>
						</view>
						<!-- zrPosts -->
						<view class="warp1_2_1"  @click="submit('transferPosts',3)">
							<view class="">
								<image src="@/static/img/fcxx.png" />
								<text>求租</text>
							</view>
						</view>
					</view>
					<view class="warp1_3">
						<view class="warp1_2_1" @click="submit('transferPosts',1)">
							<view class="">
								<image src="@/static/img/czx.png" />
								<text>出租</text>
							</view>
						</view>
						<!-- second-hand -->
						<view class="warp1_2_1"  @click="submit('transferPosts',4)">
							<view class="">
								<image src="@/static/img/exs.png" />
								<text>二手设备</text>
							</view>
						</view>
					</view>
					<view class="fb">
						<image src="../../static/img/fb.png"
						@click.stop="showz=false"
						></image>
					</view>
					
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name:"fb-pop",
		data() {
			return {
				showz:false
			};
		},
		methods:{
			//跳转
			submit(a,b){
				uni.navigateTo({
					url:`/pages/${a}/${a}?type=${b}`
				})
			},
			sign(){
				this.showz=true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp1 {
		position: relative;
.fb{
	padding-bottom: constant(safe-area-inset-bottom) !important;;
	padding-bottom: env(safe-area-inset-bottom) !important;;  
	image{
		width: 121rpx;
		height: 121rpx;
	}
	position: absolute;

	left: 50%;
	bottom:30rpx;
	z-index: 88888;
	transform: translateX(-50%);
}
		// background: white
		.warp1_1 {
			// background: white;
			padding-bottom: constant(safe-area-inset-bottom) !important;;  
			padding-bottom: env(safe-area-inset-bottom) !important;;  
			position: absolute;
			bottom: 0rpx;
			height: 400rpx;
			width: 100%;
			.warp1_3 {
				display: flex;
				justify-content: space-between;
				width:80% !important;
				margin: 60rpx auto !important;
				.warp1_2_1 {
					width: 153rpx;
					height: 153rpx;
					background: #FFFFFF;
					border-radius: 50%;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				
					image {
						width: 66rpx;
						height: 61rpx;
					}
				
					text {
						display: block;
						font-size: 26rpx;
						font-family: OPPOSans;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.warp1_2 {
				display: flex;
				justify-content: space-around;
				width: 70%;
				margin: 0 auto;

				.warp1_2_1 {
					width: 153rpx;
					height: 153rpx;
					background: #FFFFFF;
					border-radius: 50%;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 66rpx;
						height: 61rpx;
					}

					text {
						display: block;
						font-size: 26rpx;
						font-family: OPPOSans;
						font-weight: 400;
						color: #333333;
					}
				}

			}
		}

	}

</style>
